<template>
  <div>
    <el-dialog width="60%" :visible.sync="dialogVisible" @close="onClose" :title="title">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px"
               label-position="left">
        <el-form-item label="游戏类型" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio :label="1">俩间房</el-radio>
            <el-radio :label="2">五间房</el-radio>
            <el-radio :label="3">八间房</el-radio>
            <el-radio :label="4">石头剪刀布</el-radio>
            <el-radio :label="5">炸飞机</el-radio>
            <el-radio :label="6">大富翁</el-radio>
            <el-radio :label="7">爬塔</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="页面地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入页面地址"></el-input>
        </el-form-item>
        <el-form-item label="宝塔Url" prop="pagodaUrl">
          <el-input v-model="formData.pagodaUrl" placeholder="请输入宝塔Url"></el-input>
        </el-form-item>
        <el-form-item label="ApiUrl" prop="apiUrl">
          <el-input v-model="formData.apiUrl" placeholder="请输入ApiUrl"></el-input>
        </el-form-item>
        <el-form-item label="SockUrl" prop="sockUrl">
          <el-input v-model="formData.sockUrl" placeholder="请输入ApiUrl"></el-input>
        </el-form-item>
        <el-form-item label="游戏图片" prop="imgUrl">
          <ImageUpload v-model="formData.imgUrl" :limit="1"/>
        </el-form-item>
        <el-form-item label="游戏名称" prop="gameName">
          <el-input v-model="formData.gameName" placeholder="请输入游戏名称"></el-input>
        </el-form-item>
        <el-form-item label="游戏介绍" prop="content">
          <el-input v-model="formData.content" placeholder="请输入游戏介绍"></el-input>
        </el-form-item>
        <el-form-item label="游戏开始时间" prop="startTime">
          <el-time-picker
            value-format='HH:mm:ss'
            v-model="formData.startTime"
            placeholder="游戏开始时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="游戏结束时间" prop="endTime">
          <el-time-picker
            v-model="formData.endTime"
            value-format='HH:mm:ss'
            :picker-options="{selectableRange: '00:00:00 - 23:59:59' }"
            placeholder="游戏结束时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="游戏状态" >
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {setUrl, SaveUrl} from "@/api/game/game"

export default {
  data() {
    return {
      dialogVisible: false,
      title: '编辑',
      formData: {
        address: undefined,
        apiUrl:undefined,
        content:undefined,
        gameName:undefined,
        imgUrl:undefined,
        sockUrl:undefined,
        status:1,
        type: 1,
        startTime: undefined,
        endTime: undefined,
        pagodaUrl:undefined,
      },
      rules: {
        pagodaUrl:[
          {
            required: true,
            message: '请输入pagodaUrl',
            trigger: 'blur'
          }
        ],
        sockUrl:[
          {
            required: true,
            message: '请输入sockUrl',
            trigger: 'blur'
          }
        ],
        imgUrl:[
          {
            required: true,
            message: '请上传图片',
            trigger: 'blur'
          }
        ],
        content:[
          {
            required: true,
            message: '请输入介绍',
            trigger: 'blur'
          }
        ],
        apiUrl:[{
          required: true,
          message: '请输入apiUrl',
          trigger: 'blur'
        }],
        address:[{
          required: true,
          message: '请输入页面地址',
          trigger: 'blur'
        }],
        gameName: [{
          required: true,
          message: '请输入游戏名称',
          trigger: 'blur'
        }],
        startTime: [{
          required: true,
          message: '请选择开始时间',
          trigger: 'blur'
        }],
        endTime: [{
          required: true,
          message: '请选择结束时间',
          trigger: 'blur'
        }],
      },
      id: null
    }
  },

  methods: {

    // 弹窗
    async onOpen(data) {
      if (data) {
        this.id = true
        this.title = "编辑"
        this.formData = JSON.parse(decodeURIComponent(data));
      } else {
        this.id = false
        this.title = "新增"
      }
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
      this.$refs['elForm'].resetFields()
      this.formData.address = undefined
      this.formData.apiUrl = undefined
      this.formData.content = undefined
      this.formData.imgUrl = undefined
      this.formData.sockUrl = undefined
      this.formData.status = 1
      this.formData.type = 0
      this.formData.startTime = undefined
      this.formData.endTime = undefined
    },
    close() {
      this.dialogVisible = false
    },
    // 提交数据
    handleConfirm() {
      this.$refs['elForm'].validate(async valid => {
        this.loading = true
        if (!valid) {
          // 如果验证不通过，则阻止后续代码执行
          this.loading = false;
          return;
        }
        if (this.id) {
          try {
            // 编辑
            await setUrl(this.formData)
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        } else {
          try {
            // 新增
            await SaveUrl(this.formData)
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
